<template>
  <div class="box">
    <div class="menu">
<!--      <image-load-->
<!--        filePath="/resource/svg/light/logo.svg?2.0.1744016326472"-->
<!--        class="lang img"-->
<!--        @click="$router.push('/language-selection')"-->
<!--      />-->
      <svg-load name="logo" class="lang img" @click="$router.push('/language-selection')"></svg-load>
      <svg-load name="guanbi" class="guanbi" @click="$router.push('/')"></svg-load>
    </div>
    <div class="top">
      <!-- <p class="left" v-if="props.type != 2">Hi</p> -->
      <!-- 忘记密码 -->
      <p class="left" v-if="props.type == 2">{{ _t18('forget_pwd', ['bitmake']) }}</p>
    </div>
    <div class="bottom">
      <!-- 欢迎登录 -->
      <p v-if="props.type == 0">{{ _t18('login_title') }} {{ _getConfig('_APP_META_TITLE') }}</p>
      <p v-if="props.type == 1">{{ _t18('register_title') }} {{ _getConfig('_APP_META_TITLE') }}</p>
    </div>
  </div>
</template>

<script setup>
import { _t18 } from '@/utils/public'
import { useMainStore } from '@/store/index'
import { computed } from 'vue'
const mainStore = useMainStore()
/**
 * 当前语言实例
 */
const currentLanguage = computed(() =>
  mainStore.languageList.find((elem) => elem.dictValue == mainStore.language)
)
const props = defineProps({
  type: {
    type: Number
  }
})
</script>

<style lang="scss" scoped>
* {
  font-size: 14px;
  color: #1e293b;
}

.box {
  padding: 24px 24px 0px;
  
  .menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    
    .guanbi {
      font-size: 22px;
      cursor: pointer;
      color: #64748b;
      transition: all 0.2s ease;
      padding: 8px;
      border-radius: 50%;
      
      &:hover {
        color: #1e293b;
        background: rgba(100, 116, 139, 0.1);
      }
    }
    
    .lang {
      width: 28px;
      height: 28px;
      cursor: pointer;
      transition: all 0.2s ease;
      padding: 4px;
      border-radius: 8px;
      
      &:hover {
        background: rgba(23, 172, 116, 0.1);
        transform: scale(1.05);
      }
    }
  }
  
  .top {
    padding-top: 0;
    margin-bottom: 20px;
    
    .right {
      display: flex;
    }
    
    p {
      font-size: 17px;
      font-weight: 600;
      color: #64748b;
      margin: 0;
    }
  }
  
  .bottom {
    p {
      font-size: 28px;
      line-height: 1.2;
      font-weight: 700;
      color: #1e293b;
      margin: 0;
      text-align: center;
      position: relative;
      
      &::after {
        content: '';
        position: absolute;
        bottom: -12px;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 3px;
        background: linear-gradient(90deg, transparent, #17AC74, transparent);
        border-radius: 2px;
      }
    }
  }
}

// 响应式设计
@media (max-width: 480px) {
  .box {
    padding: 20px 20px 0px;
    
    .menu {
      margin-bottom: 28px;
      
      .guanbi {
        font-size: 20px;
        padding: 6px;
      }
      
      .lang {
        width: 26px;
        height: 26px;
        padding: 3px;
      }
    }
    
    .top {
      margin-bottom: 16px;
      
      p {
        font-size: 16px;
      }
    }
    
    .bottom {
      p {
        font-size: 24px;
        
        &::after {
          width: 50px;
          height: 2px;
          bottom: -10px;
        }
      }
    }
  }
}
</style>
